import AvatarUpload from "@/components/avatar-upload";
import RoleSelect from "@/components/role-select";
import { Form, type FormInstance, Modal, Input, Row, Col, Radio } from "antd";
import { Component, createRef } from "react";

interface IProps {
  onOk: (value: any) => void;
}
interface IState {
  visible: boolean;
  title: string;
  curId: number;
}

const rules = [{ required: true, message: "***" }];

export default class UpsertModal extends Component<IProps, IState> {
  formRef = createRef<FormInstance>();

  // curId = -1;

  state: Readonly<IState> = {
    visible: false,
    title: "新增",
    curId: -1,
  };

  handleCancel = () => {
    this.close();
  };

  handleOk = async () => {
    // 1. 校验
    await this.formRef.current?.validateFields();
    // 2. 获取 parmas
    const params = this.formRef.current?.getFieldsValue();
    //    2.1 根据当前模式来在 params 中增加 Id 字段
    if (this.state.curId !== -1) {
      params.id = this.state.curId;
    }
    // 3. 触发父组件传递过来的 onOk
    this.props.onOk(params);
  };

  open = (record?: User.Info) => {
    this.setState(
      {
        visible: true,
        title: record ? "编辑" : "新增",
        curId: record ? record.id : -1,
      },
      () => {
        if (record) {
          // 编辑
          this.formRef.current?.setFieldsValue({
            ...record,
            roleIdList: record.roleIdList?.split(",").map((item) => +item),
          });
        } else {
          // 新增
          this.formRef.current?.resetFields();
        }
      }
    );
  };

  close = () => {
    this.setState({ visible: false });
  };

  render() {
    const {
      state: { visible, title },
    } = this;

    return (
      <Modal
        open={visible}
        title={title}
        width={640}
        onCancel={this.handleCancel}
        onOk={this.handleOk}
      >
        <Form
          ref={this.formRef}
          labelCol={{ span: 4 }}
          initialValues={{
            status: true,
          }}
        >
          <Form.Item name="headImg" label="头像" valuePropName="url">
            <AvatarUpload />
          </Form.Item>

          <Row gutter={20}>
            <Col span={12}>
              <Form.Item
                name="name"
                label="姓名"
                labelCol={{ span: 8 }}
                rules={rules}
              >
                <Input placeholder="请输入姓名" />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                name="nickName"
                label="昵称"
                labelCol={{ span: 8 }}
                rules={rules}
              >
                <Input placeholder="请输入昵称" />
              </Form.Item>
            </Col>
          </Row>

          <Row gutter={20}>
            <Col span={12}>
              <Form.Item
                name="username"
                label="用户名"
                labelCol={{ span: 8 }}
                rules={rules}
              >
                <Input placeholder="请输入用户名" />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                name="password"
                label="密码"
                labelCol={{ span: 8 }}
                rules={this.state.curId === -1 ? rules : undefined}
              >
                <Input.Password placeholder="请输入密码" />
              </Form.Item>
            </Col>
          </Row>

          <Form.Item name="roleIdList" label="角色">
            <RoleSelect />
          </Form.Item>

          <Form.Item name="phone" label="手机号码">
            <Input placeholder="请输入手机号码" />
          </Form.Item>

          <Form.Item name="remark" label="备注">
            <Input.TextArea placeholder="请输入备注" />
          </Form.Item>

          <Form.Item name="status" label="状态">
            <Radio.Group>
              <Radio value={true}>开启</Radio>
              <Radio value={false}>关闭</Radio>
            </Radio.Group>
          </Form.Item>
        </Form>
      </Modal>
    );
  }
}
